<div class="da-list-wrap">
  <div class="da-content-wrapper">
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24" [dFlex]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="da-header-left">
              <d-row [dSpace]="12" [dSpaceDirection]="'horizontal'" [dAlign]="'center'">
                <d-col>
                  <div class="da-header-item-label">{{ 'admin.dictTypeCode' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="dictTypeCode" [(ngModel)]="searchFormConfig.dictTypeCode" (keyup.enter)="refreshTable()" />
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'admin.dictCode' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="dictCode" [(ngModel)]="searchFormConfig.dictCode" (keyup.enter)="refreshTable()" />
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'admin.dictValue' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="dictValue" [(ngModel)]="searchFormConfig.dictValue" (keyup.enter)="refreshTable()" />
                </d-col>
              </d-row>
            </div>
            <div class="header-right">
              <d-button style="margin-right: 8px" bsStyle="primary" (btnClick)="refreshTable()">{{
                'app.common.operate.query.label' | translate
              }}</d-button>
              <d-button bsStyle="common" (btnClick)="reset()">{{ 'app.common.operate.reset.label' | translate }}</d-button>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="10">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="header-left table-title">
              {{ 'admin.dictType' | translate }}
            </div>
            <div class="header-right">
              <d-button-group>
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.dictTypeAdd)"
                  bsStyle="primary"
                  (btnClick)="openAddDictTypeDialog()"
                  >{{ 'app.common.operate.new.label' | translate }}</d-button
                >
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.dictTypeDelete)"
                  bsStyle="common"
                  (btnClick)="openDeleteDictTypeDialog(dictTypeTable.getCheckedRows())"
                  [disabled]="!dictTypeTableChecked"
                  >{{ 'app.common.operate.delete.label' | translate }}</d-button
                >
              </d-button-group>
            </div>
          </div>
          <div class="list-content" id="dictTypeContent">
            <d-data-table
              #dictTypeTable
              [dataSource]="dictTypeTableDs"
              [resizeable]="true"
              [checkable]="true"
              [tableLayout]="'fixed'"
              [scrollable]="true"
              [fixHeader]="true"
              (rowCheckChange)="getDictTypeCheckedStatus()"
              (checkAllChange)="getDictTypeCheckedStatus()"
              (rowDBClick)="dataTypeRowClick($event.rowItem)"
            >
              <d-column field="dictTypeCode" header="{{ 'admin.dictTypeCode' | translate }}" [width]="'180px'" [fixedLeft]="'36px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="dictTypeName" header="{{ 'admin.dictTypeName' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="remark" header="{{ 'admin.remark' | translate }}" [width]="'260px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}" [width]="'120px'" [fixedRight]="'0px'">
                <d-cell>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <div class="btn-group over-flow-ellipsis">
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.dictTypeEdit)"
                        icon="icon-edit"
                        bsStyle="text-dark"
                        (btnClick)="openEditDictTypeDialog(rowItem)"
                        title="{{ 'app.common.operate.edit.label' | translate }}"
                      ></d-button>
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.dictTypeDelete)"
                        icon="icon-delete"
                        bsStyle="text-dark"
                        (btnClick)="openDeleteDictTypeDialog([rowItem])"
                        title="{{ 'app.common.operate.delete.label' | translate }}"
                      ></d-button>
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
              <ng-template #noResultTemplateRef>
                <div style="text-align: center; margin-top: 20px">{{ 'app.common.noRecord' | translate }}</div>
              </ng-template>
            </d-data-table>
          </div>
          <div class="da-list-footer">
            <d-pagination
              size=""
              [total]="dictTypePager.total"
              [(pageSize)]="dictTypePager.pageSize"
              [(pageIndex)]="dictTypePager.pageIndex"
              [canViewTotal]="true"
              [canChangePageSize]="true"
              [canJumpPage]="true"
              [maxItems]="5"
              (pageIndexChange)="refreshDictTypeTable()"
              (pageSizeChange)="refreshDictTypeTable()"
            >
            </d-pagination>
          </div>
        </div>
      </d-col>
      <d-col [dSpan]="14">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="header-left table-title">
              {{ 'admin.dict' | translate }}
            </div>
            <div class="header-right">
              <d-button-group>
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.dictDataAdd)"
                  bsStyle="primary"
                  (btnClick)="openAddDictDataDialog()"
                  >{{ 'app.common.operate.new.label' | translate }}</d-button
                >
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.dictDataDelete)"
                  bsStyle="common"
                  (btnClick)="openDeleteDictDataDialog(dictDataTable.getCheckedRows())"
                  [disabled]="!dictDataTableChecked"
                  >{{ 'app.common.operate.delete.label' | translate }}</d-button
                >
              </d-button-group>
            </div>
          </div>
          <div class="list-content" id="dictDataContent">
            <d-data-table
              #dictDataTable
              [dataSource]="dictDataTableDs"
              [resizeable]="true"
              [checkable]="true"
              [tableLayout]="'fixed'"
              [scrollable]="true"
              [fixHeader]="true"
              (rowCheckChange)="getDictDataCheckedStatus()"
              (checkAllChange)="getDictDataCheckedStatus()"
            >
              <d-column field="dictType" header="{{ 'admin.dictType' | translate }}" [width]="'240px'" [fixedLeft]="'36px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem.dictTypeCode + '-' + cellItem.dictTypeName }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="dictCode" header="{{ 'admin.dictCode' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="dictValue" header="{{ 'admin.dictValue' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="remark" header="{{ 'admin.remark' | translate }}" [width]="'260px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}" [width]="'120px'" [fixedRight]="'0px'">
                <d-cell>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <div class="btn-group over-flow-ellipsis">
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.dictDataEdit)"
                        icon="icon-edit"
                        bsStyle="text-dark"
                        (btnClick)="openEditDictDataDialog(rowItem)"
                        title="{{ 'app.common.operate.edit.label' | translate }}"
                      ></d-button>
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.dictDataDelete)"
                        icon="icon-delete"
                        bsStyle="text-dark"
                        (btnClick)="openDeleteDictDataDialog([rowItem])"
                        title="{{ 'app.common.operate.delete.label' | translate }}"
                      ></d-button>
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
              <ng-template #noResultTemplateRef>
                <div style="text-align: center; margin-top: 20px">{{ 'app.common.noRecord' | translate }}</div>
              </ng-template>
            </d-data-table>
          </div>
          <div class="da-list-footer">
            <d-pagination
              size=""
              [total]="dictDataPager.total"
              [(pageSize)]="dictDataPager.pageSize"
              [(pageIndex)]="dictDataPager.pageIndex"
              [canViewTotal]="true"
              [canChangePageSize]="true"
              [canJumpPage]="true"
              [maxItems]="5"
              (pageIndexChange)="refreshDictDataTable()"
              (pageSizeChange)="refreshDictDataTable()"
            >
            </d-pagination>
          </div>
        </div>
      </d-col>
    </d-row>
  </div>
</div>
